<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-from-qmlproject-to-pro.qdoc -->
  <title>Converting UI Projects to Applications | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Converting UI Projects to Applications</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="creator-qml-modules-with-plugins.html" />
  <link rel="next" href="creator-using-qt-designer.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="creator-qml-modules-with-plugins.html">Using QML Modules with Plugins</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-using-qt-designer.html">Developing Widget Based Applications</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#converting-projects">Converting Projects</a></li>
<li class="level1"><a href="#adding-qt-quick-timeline-module-to-qt-installations">Adding Qt Quick Timeline Module to Qt Installations</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Converting UI Projects to Applications</h1>
<span class="subtitle"></span>
<!-- $$$quick-converting-ui-projects.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Quick UI projects are useful for creating user interfaces. To use them for application development in Qt Creator you have to add:</p>
<ul>
<li>Project configuration file (.pro)</li>
<li>C++ code (.cpp)</li>
<li>Resource files (.qrc)</li>
<li>Code needed for deploying applications to <a href="creator-glossary.html#glossary-device">devices</a></li>
</ul>
<p>You can use a Qt Creator wizard to create a Qt Quick application that is built using the qmake build system and then copy the source files from the Qt UI Quick project to the application project.</p>
<p>You can use the <code>RESOURCES</code> option in the project configuration file to automatically add all the QML files and related assets to a Qt resource file.</p>
<p>The wizard automatically adds the <code>QML_IMPORT_PATH</code> option to the project file for specifying the required <a href="https://doc.qt.io/qt-5/qtqml-syntax-imports.html#qml-import-path">QML import path</a>. The path is only needed if more than one subdirectory contains QML files.</p>
<p>Then you can use the <a href="http://doc.qt.io/qt-5/qquickview.html">QQuickView</a> class in the main C++ source file to show the main QML file when the application starts.</p>
<p>The <a href="http://doc.qt.io/qt-5/qtquicktimeline-index.html">Qt Quick Timeline</a> module is delivered with Qt Design Studio and with Qt 5.14, and later. If you use a timeline in a Qt Design Studio project that you import to Qt Creator, and your Qt is older than 5.14, you must build the Qt Quick Timeline module and install it to your Qt to be able to build your project.</p>
<a name="converting-projects"></a>
<h2 id="converting-projects">Converting Projects</h2>
<p>To convert a project that has a .qmlproject file to one that has a .pro file:</p>
<ol class="1" type="1"><li>Select <b>File</b> &gt; <b>New File or Project</b> &gt; <b>Application</b> &gt; <b>Qt Quick Application - Empty</b> &gt; <b>Choose</b>.</li>
<li>In the <b>Build system</b> field, select <a href="http://doc.qt.io/qt-5/qmake-manual.html">qmake</a> as the build system to use for building and running the project, and then select <b>Next</b> (or <b>Continue</b> on <a href="nolink">macOS</a>).</li>
<li>Follow the instructions of the wizard to create the project.</li>
<li>In the file explorer, copy the source files from the Qt Quick UI project directory to a subdirectory in the application project directory. For the purpose of these instructions, the directory is called <code>qml</code>.</li>
<li>Open the application project file, and edit the value of the <code>RESOURCES</code> option to add the following line:<pre class="cpp plain">

  RESOURCES += \
      $$files(qml/*)

</pre>
</li>
<li>Select <b>Build</b> &gt; <b>Run qmake</b> to apply the <code>RESOURCES</code> option to the build configuration.</li>
<li>Open the <i>main.cpp</i> file and replace the <a href="http://doc.qt.io/qt-5/qqmlapplicationengine.html">QQmlApplicationEngine</a> object with a <a href="http://doc.qt.io/qt-5/qquickview.html">QQuickView</a> object:<pre class="cpp">

      <span class="type"><a href="http://doc.qt.io/qt-5/qquickview.html">QQuickView</a></span> view;
      view<span class="operator">.</span>engine()<span class="operator">-</span><span class="operator">&gt;</span>addImportPath(<span class="string">&quot;qrc:/qml/imports&quot;</span>);
      view<span class="operator">.</span>setSource(<span class="type"><a href="http://doc.qt.io/qt-5/qurl.html">QUrl</a></span>(<span class="string">&quot;qrc:/qml/ProgressBar.ui.qml&quot;</span>));
      <span class="keyword">if</span> (<span class="operator">!</span>view<span class="operator">.</span>errors()<span class="operator">.</span>isEmpty())
          <span class="keyword">return</span> <span class="operator">-</span><span class="number">1</span>;
      view<span class="operator">.</span>show();

</pre>
<p>Where <code>qrc:/qml/imports</code> is the import path and <code>qrc:/qml/ProgressBar.ui.qml</code> is the path to and the name of the main QML file in the Qt Quick UI project.</p>
</li>
<li>Select <b>Build</b> &gt; <b>Run</b> to build and run your project.</li>
</ol>
<p>For example, if you copy the source files of the <i>ProgressBar</i> example from your Qt Design Studio installation (located in the <code>\share\qtcreator\examples\ProgressBar</code> directory) to an empty Qt Quick application project and make the necessary changes, the <i>main.cpp</i> file should look as follows:</p>
<pre class="cpp">

  <span class="preprocessor">#include &lt;QGuiApplication&gt;</span>
  <span class="preprocessor">#include &lt;QQmlApplicationEngine&gt;</span>
  <span class="preprocessor">#include &lt;QQuickView&gt;</span>

  <span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
  {
      <span class="type"><a href="http://doc.qt.io/qt-5/qcoreapplication.html">QCoreApplication</a></span><span class="operator">::</span>setAttribute(<span class="type"><a href="http://doc.qt.io/qt-5/qt.html">Qt</a></span><span class="operator">::</span>AA_EnableHighDpiScaling);

      <span class="type"><a href="http://doc.qt.io/qt-5/qguiapplication.html">QGuiApplication</a></span> app(argc<span class="operator">,</span> argv);

      <span class="type"><a href="http://doc.qt.io/qt-5/qquickview.html">QQuickView</a></span> view;
      view<span class="operator">.</span>engine()<span class="operator">-</span><span class="operator">&gt;</span>addImportPath(<span class="string">&quot;qrc:/qml/imports&quot;</span>);
      view<span class="operator">.</span>setSource(<span class="type"><a href="http://doc.qt.io/qt-5/qurl.html">QUrl</a></span>(<span class="string">&quot;qrc:/qml/ProgressBar.ui.qml&quot;</span>));
      <span class="keyword">if</span> (<span class="operator">!</span>view<span class="operator">.</span>errors()<span class="operator">.</span>isEmpty())
          <span class="keyword">return</span> <span class="operator">-</span><span class="number">1</span>;
      view<span class="operator">.</span>show();

      app<span class="operator">.</span>exec();
  }

</pre>
<a name="adding-qt-quick-timeline-module-to-qt-installations"></a>
<h2 id="adding-qt-quick-timeline-module-to-qt-installations">Adding Qt Quick Timeline Module to Qt Installations</h2>
<p><b>Note: </b>You only need to do this if your Qt version is older than 5.14.</p><p>Check out the <a href="http://doc.qt.io/qt-5/qtquicktimeline-index.html">Qt Quick Timeline</a> module from <a href="https://codereview.qt-project.org/#/admin/projects/qt/qtquicktimeline">Qt Code Review</a>.</p>
<p>For example:</p>
<pre class="cpp plain">

  git clone ssh://user@codereview.qt-project.org:29418/qt/qtquicktimeline

</pre>
<p>Then use qmake from your Qt installation to build the module and to add it to your Qt. Switch to the directory that contains the sources (usually, <code>qtquicktimeline</code>), and enter the following commands:</p>
<pre class="cpp plain">

  &lt;path_to_qmake&gt;\qmake -r
  make
  make install

</pre>
<p>On Windows, use the <code>nmake</code> and <code>nmake install</code> commands instead.</p>
</div>
<!-- @@@quick-converting-ui-projects.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="creator-qml-modules-with-plugins.html">Using QML Modules with Plugins</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="creator-using-qt-designer.html">Developing Widget Based Applications</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
